<template>
  <div class="app-container">
    <el-divider content-position="left"><el-link type="primary">租房分期</el-link></el-divider>

    <el-table v-loading="loading" :data="productList1" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column label="产品名称" align="center" prop="jrProductName" width="200"/>
      <el-table-column label="资方" align="center" prop="companyName" />
      <el-table-column label="账户信息" align="center" prop="bankName" width="200">
        <template slot-scope="scope">
          <span>{{scope.row.bankName}}{{scope.row.bankCardNumber}}</span>
        </template>
      </el-table-column>
      <el-table-column label="分期期限" align="center" prop="instalmentPeriod">
        <template slot-scope="scope">
          <span v-if="scope.row.instalmentPeriod == -1">无限期</span>
          <span v-if="scope.row.instalmentPeriod != -1">{{scope.row.instalmentPeriod}}个月</span>
        </template>
      </el-table-column>
      <el-table-column label="还款方式" align="center" prop="repaymentType">
        <template slot-scope="scope">
          {{scope.row.repaymentType == 1 ? '按月还款' : scope.row.repaymentType == 2 ? '按季还款' : '按租约周期还款'}}
        </template>
      </el-table-column>
      <el-table-column label="审核状态" align="center" prop="delFlg">
        <template slot-scope="scope">
          {{scope.row.auditorStatus == 1 ? '未审核' : '驳回'}}
        </template>
      </el-table-column>
      <el-table-column label="授信额度" align="center" prop="creditLine" />
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="toAdopt(scope.row.id,1)"
            v-hasPermi="['financial:product:edit']"
          >通过</el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-delete"
            @click="toReject(scope.row.id,1)"
            v-hasPermi="['financial:product:remove']"
            v-if="scope.row.auditorStatus != 2"
            style="color: red"
          >驳回</el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total1>0"
      :total="total1"
      :page.sync="queryParams1.pageNum"
      :limit.sync="queryParams1.pageSize"
      @pagination="getList1"
    />
    <br>
    <el-divider content-position="left"><el-link type="success">收房贷</el-link></el-divider>


    <el-table v-loading="loading" :data="productList2" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column label="产品名称" align="center" prop="jrProductName" width="200"/>
      <el-table-column label="资方" align="center" prop="companyName" />
      <el-table-column label="账户信息" align="center" prop="bankName" width="200">
        <template slot-scope="scope">
          <span>{{scope.row.bankName}}{{scope.row.bankCardNumber}}</span>
        </template>
      </el-table-column>
      <el-table-column label="分期期限" align="center" prop="instalmentPeriod">
        <template slot-scope="scope">
          <span v-if="scope.row.instalmentPeriod == -1">无限期</span>
          <span v-if="scope.row.instalmentPeriod != -1">{{scope.row.instalmentPeriod}}个月</span>
        </template>
      </el-table-column>
      <el-table-column label="还款方式" align="center" prop="repaymentType">
        <template slot-scope="scope">
          {{scope.row.repaymentType == 1 ? '按月还款' : scope.row.repaymentType == 2 ? '按季还款' : '按租约周期还款'}}
        </template>
      </el-table-column>
      <el-table-column label="审核状态" align="center" prop="delFlg">
        <template slot-scope="scope">
          {{scope.row.auditorStatus == 1 ? '未审核' : '驳回'}}
        </template>
      </el-table-column>
      <el-table-column label="授信额度" align="center" prop="creditLine" />
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="toAdopt(scope.row.id,2)"
            v-hasPermi="['financial:product:edit']"
          >通过</el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-delete"
            @click="toReject(scope.row.id,2)"
            v-hasPermi="['financial:product:remove']"
            v-if="scope.row.auditorStatus != 2"
            style="color: red"
          >驳回</el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total2>0"
      :total="total2"
      :page.sync="queryParams2.pageNum"
      :limit.sync="queryParams2.pageSize"
      @pagination="getList2"
    />

    <br>
    <el-divider content-position="left"><el-link type="danger">应收租约保理</el-link></el-divider>

    <el-table v-loading="loading" :data="productList3" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column label="产品名称" align="center" prop="jrProductName" width="200"/>
      <el-table-column label="资方" align="center" prop="companyName" />
      <el-table-column label="账户信息" align="center" prop="bankName" width="200">
        <template slot-scope="scope">
          <span>{{scope.row.bankName}}{{scope.row.bankCardNumber}}</span>
        </template>
      </el-table-column>
      <el-table-column label="分期期限" align="center" prop="instalmentPeriod">
        <template slot-scope="scope">
          <span v-if="scope.row.instalmentPeriod == -1">无限期</span>
          <span v-if="scope.row.instalmentPeriod != -1">{{scope.row.instalmentPeriod}}个月</span>
        </template>
      </el-table-column>
      <el-table-column label="还款方式" align="center" prop="repaymentType">
        <template slot-scope="scope">
          {{scope.row.repaymentType == 1 ? '按月还款' : scope.row.repaymentType == 2 ? '按季还款' : '按租约周期还款'}}
        </template>
      </el-table-column>
      <el-table-column label="审核状态" align="center" prop="delFlg">
        <template slot-scope="scope">
          {{scope.row.auditorStatus == 1 ? '未审核' : '驳回'}}
        </template>
      </el-table-column>
      <el-table-column label="授信额度" align="center" prop="creditLine" />
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="toAdopt(scope.row.id,3)"
            v-hasPermi="['financial:product:edit']"
          >通过</el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-delete"
            @click="toReject(scope.row.id,3)"
            v-hasPermi="['financial:product:remove']"
            v-if="scope.row.auditorStatus != 2"
            style="color: red"
          >驳回</el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total3>0"
      :total="total3"
      :page.sync="queryParams3.pageNum"
      :limit.sync="queryParams3.pageSize"
      @pagination="getList3"
    />
  </div>
</template>

<script>
import { listAuditor, toAuditor, toReject } from "@/api/financial/product";

export default {
  name: "Product",
  components: {
  },
  data() {
    return {
      // 是否显示支付地址
      payStatus:false,
      // 账户选择标识
      account:false,
      // 账户选择标识
      accountType:false,
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total1: 0,
      // 总条数
      total2: 0,
      // 总条数
      total3: 0,
      // 租房分期表格数据
      productList1: [],
      // 收房贷表格数据
      productList2: [],
      // 应收租约保理表格数据
      productList3: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 查询参数1
      queryParams1: {
        pageNum: 1,
        pageSize: 10,
        jrProductType: null
      },
      // 查询参数2
      queryParams2: {
        pageNum: 1,
        pageSize: 10,
        jrProductType: null
      },
      // 查询参数3
      queryParams3: {
        pageNum: 1,
        pageSize: 10,
        jrProductType: null
      },
    };
  },
  created() {
    this.getList1(1);
    this.getList2(2);
    this.getList3(3);
  },
  methods: {
    /** 查询租房分期列表 */
    getList1() {
      this.loading = true;
      this.queryParams1.jrProductType = 1;
      listAuditor(this.queryParams1).then(response => {
        this.productList1 = response.rows;
        this.total1 = response.total;
        this.loading = false;
      });
    },
    /** 查询租房分期列表 */
    getList2() {
      this.loading = true;
      this.queryParams2.jrProductType = 2;
      listAuditor(this.queryParams2).then(response => {
        this.productList2 = response.rows;
        this.total2 = response.total;
        this.loading = false;
      });
    },
    /** 查询租房分期列表 */
    getList3() {
      this.loading = true;
      this.queryParams3.jrProductType = 3;
      listAuditor(this.queryParams3).then(response => {
        this.productList3 = response.rows;
        this.total3 = response.total;
        this.loading = false;
      });
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.id)
      this.single = selection.length!==1
      this.multiple = !selection.length
    },
    toAdopt(id, index) {
      toAuditor(id).then(res => {
        if (res.code == 200) {
          this.$message.success('操作成功');
          if (index == 1) {
            this.getList1()
          } else if (index == 2) {
            this.getList2()
          } else {
            this.getList3()
          }
        } else {
          this.$message.error(res.msg);
        }
      });
    },
    toReject(id, index) {
      toReject(id).then(res => {
        if (res.code == 200) {
          this.$message.success('操作成功');
          if (index == 1) {
            this.getList1()
          } else if (index == 2) {
            this.getList2()
          } else {
            this.getList3()
          }
        } else {
          this.$message.error(res.msg);
        }
      });
    }
  }
};
</script>
